<template>
  <view class="u-date-filter">
    <u-input
      @click="handleClick"
      :placeholder="placeholder"
      :placeholderStyle="placeholderStyle"
      :border="border"
      :borderColor="borderColor"
      :disabled="true"
      :modelValue="dateValue"
      :style="{
        width: style.width,
        height: style.height,
      }"
      :customStyle="inputStyle"
    />
    <u-calendar v-model="show" v-bind="$attrs" :mode="mode" @change="confirm" />
  </view>
</template>

<script>
import mpConfig from '../../libs/mixin/mp-vertual-node.js'
/**
 * u-date-filter 时间筛选器
 * @description 此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。
 * @tutorial http://uviewui.com/components/calendar.html
 * @property {String} mode 选择日期的模式，date-为单个日期，range-为选择日期范围
 * @property {Boolean} v-model 布尔值变量，用于控制日历的弹出与收起
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
 * @property {Boolean} change-year 是否显示顶部的切换年份方向的按钮(默认true)
 * @property {Boolean} change-month 是否显示顶部的切换月份方向的按钮(默认true)
 * @property {String Number} max-year 可切换的最大年份(默认2050)
 * @property {String Number} min-year 最小可选日期(默认1950)
 * @property {String Number} min-date 可切换的最小年份(默认1950-01-01)
 * @property {String Number} max-date 最大可选日期(默认当前日期)
 * @property {String Number} 弹窗顶部左右两边的圆角值，单位rpx(默认20)
 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭日历(默认true)
 * @property {String} month-arrow-color 月份切换按钮箭头颜色(默认#606266)
 * @property {String} year-arrow-color 年份切换按钮箭头颜色(默认#909399)
 * @property {String} color 日期字体的默认颜色(默认#303133)
 * @property {String} active-bg-color 起始/结束日期按钮的背景色(默认#2979ff)
 * @property {String Number} z-index 弹出时的z-index值(默认10075)
 * @property {String} active-color 起始/结束日期按钮的字体颜色(默认#ffffff)
 * @property {String} range-bg-color 起始/结束日期之间的区域的背景颜色(默认rgba(41,121,255,0.13))
 * @property {String} range-color 选择范围内字体颜色(默认#2979ff)
 * @property {String} start-text 起始日期底部的提示文字(默认 '开始')
 * @property {String} end-text 结束日期底部的提示文字(默认 '结束')
 * @property {String} btn-type 底部确定按钮的主题(默认 'primary')
 * @property {String} toolTip 顶部提示文字，如设置名为tooltip的slot，此参数将失效(默认 '选择日期')
 * @property {Boolean} closeable 是否显示右上角的关闭图标(默认true)
 * @property {String} placeholder placeholder显示值(默认 '请选择日期')
 * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
 * @property {Boolean} border 是否显示边框(默认false)
 * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
 * @example <u-calendar v-model="show" :mode="mode"></u-calendar>
 */
export default {
  name: 'u-date-filter',
  options: mpConfig,
  props: {
    // 提示文字
    placeholder: {
      type: String,
      default: '请选择日期',
    },
    // 提示文字样式
    placeholderStyle: {
      type: String,
      default: 'color: #c0c4cc;',
    },
    // input|textarea是否显示边框
    border: {
      type: Boolean,
      default: false,
    },
    // 输入框的边框颜色
    borderColor: {
      type: String,
      default: '#dcdfe6',
    },
    // date-单个日期选择，range-开始日期+结束日期选择
    mode: {
      type: String,
      default: 'date',
    },
    style: {
      type: Object,
      default() {
        return {};
      },
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  emits: ['change'],
  data() {
    return {
      dateValue: '',
      show: false,
    };
  },
  computed: {
    inputStyle() {
      return Object.assign(this.style, this.customStyle);
    },
  },
  methods: {
    // 日历点击确定
    confirm(data) {
      if (this.mode === 'date') {
        this.dateValue = data.result;
      } else {
        this.dateValue = `${data.startDate} - ${data.endDate}`;
      }
      this.$emit('change');
    },
    // 点击弹出日历
    handleClick() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.u-date-filter {
  .u-input {
    margin: 0
  }
}
</style>